
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="./MouseControl/holistic/camera_utils.js" crossorigin="anonymous"></script>
    <script src="./MouseControl/holistic/control_utils.js"
        crossorigin="anonymous"></script>
    <script src="./MouseControl/holistic/drawing_utils.js"
        crossorigin="anonymous"></script>
    <script src="./MouseControl/holistic/holistic.js" crossorigin="anonymous"></script>
    <style>
   
        body{
            background: #1C1D1E;
        }
        #input_video{
            width: 200px;
            height: 190px
        }
    </style>
</head>

<body>
    <div class="container" >
        <video class="input_video"></video>
       
    </div>

    <script type="module">
        const videoElement = document.getElementsByClassName('input_video')[0];
       
        function onResults(results) {
            // 取决于网页目前在哪里
            try{
                console.log(results.rightHandLandmarks)
                console.log(results?.rightHandLandmarks[8],window.screen.width * (results?.rightHandLandmarks[8].x) , window.screen.height * (results?.rightHandLandmarks[8].y))
            }catch(e){
                // console.log(e)
            }
           

        }

        const holistic = new Holistic({
            locateFile: (file) => {
                console.log(file,"file")
                return `./MouseControl/holistic/locate/${file}`;
            }
        });
        holistic.setOptions({
            modelComplexity: 1,
            smoothLandmarks: true,
            enableSegmentation: true,
            smoothSegmentation: true,
            refineFaceLandmarks: true,
            minDetectionConfidence: 0.5,
            minTrackingConfidence: 0.5
        });
        holistic.onResults(onResults);


        // 控制0.5秒输出一次
        let timeout = 500
        let  timecount = 0
        let sleep=(timeout)=>{return new Promise((resolve)=>{setTimeout(() => {resolve()}, timeout);})}
        const camera = new Camera(videoElement, {
            onFrame: async () => {

                timecount++
                await sleep(timeout)
                await holistic.send({ image: videoElement });
            },
            width: 200,
            height: 190
        });
         
        camera.start();
    </script>

</body>

</html>